<template>
	<div id="app">
		
			<div class='view'>
				<transition name='fade'>
				<router-view></router-view>
				</transition>
			</div>
		
		<!--底部-->
		<!--<div class="pf footr_box" v-show='showBottom'>
			<ul class="list-inline" :value='activeTab' @click='handleTabChange()'>
				<li>
					<router-link value='/index/recommend' class="active" to='/index/recommend'><img src="../static/footer01.png" alt="/">
						<p>首页</p>
					</router-link>
				</li>
				<li class="click-shop">
					<router-link value='/shop' to='/shop'><img src="../static/foot02.png" alt="/">
						<p>店铺</p>
					</router-link>
				</li>
				<li class="click-order">
					<router-link value='/order' to='/order'><img src="../static/foot03.png" alt="/">
						<p>订单</p>
					</router-link>
				</li>
				<li class="click-center">
					<router-link value='/my' to='/my'><img src="../static/foot04.png" alt="/">
						<p>我的</p>
					</router-link>
				</li>
			</ul>
		</div>-->
		<!--底部 end-->
		<mu-paper class='footr_box pf' v-show='showBottom'>
			<mu-bottom-nav :value="bottomNav" shift @change="handleChange">
				<mu-bottom-nav-item value="index" title="首页" icon="home" href='#/index' />
				<mu-bottom-nav-item value="shop" title="店铺" icon="shop" href='#/shop' />
				<mu-bottom-nav-item value="order" title="订单" icon="favorite" href='#/order' />
				<mu-bottom-nav-item value="my" title="我的" icon="person_pin" href='#/my' />
			</mu-bottom-nav>
		</mu-paper>
	</div>
</template>

<script>
	import { mapGetters } from 'vuex'
	export default {
		data() {
			return {
				bottomNav: 'movies',
				bottomNavColor: 'movies'
			}
		},
		methods: {
			handleChange(val) {
				this.bottomNav = val
			},
			// 底部状态
			footerChange(path) {
				if(path == 'login') {
					this.$store.dispatch('hideFooter')
				} else {
					this.$store.dispatch('showFooter')
				}
			},

		},
		computed: mapGetters([
			// 监测底部显示状态
			'showBottom'
		]),
		created(){
			// 当created函数时监测路由信息,防止页面刷新tab高亮错误
            var tmpArr = this.$route.path.split('/')
             this.handleChange(tmpArr[1])
//          console.log(tmpArr)
//          if (tmpArr[1] === 'index') {
//          	console.log(tmpArr[1])
//             
//          }
		},
		watch: {
			$route(to) {
				// 去掉  '/' 
				var path = to.path.substring(1)
				this.footerChange(path)
			}
		}

	}
</script>

<style lang="less" rel="stylesheet/less" scoped>
	@import "./assets/theme.less";
	#app {
		.view {
			margin-bottom: 60px;
		}
	}
	/*底部样式*/
	
	.footr_box {
		bottom: 0;
		left: 0;
		width: 100%;
		text-align: center;
		background: #fff;
		z-index: 11;
		a {
			color: #333;
		}
		.list-inline {
			display: flex;
			width: 100%;
			padding-top: 10px;
			li {
				flex: 1;
				>a.active {
					color: #d1506d;
				}
				>a {
					position: relative;
					z-index: 2;
					display: block;
					img {
						width: 30%;
					}
				}
			}
		}
	}
	
	@color: #d1506d;
	.mu-appbar {
		background: #fff;
		color: @color;
		height: 44px;
	}
	
	.view-tabs {
		background-color: #fff;
		color: rgba(0, 0, 0, .87);
		>.mu-tab-link {
			color: rgba(102, 102, 102, 1);
		}
		>.mu-tab-active {
			color: @color;
		}
	}
	
	/*动画*/
	.fade-enter-active{
	  	transition: opacity .3s;
	}
	.fade-enter, .fade-leave-active {
	  	opacity: 0;
	}

</style>